<template>
  <div>

  <el-dialog
    :title="!dataForm.id ? $t('Common.Add') : $t('Common.Edit')"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="auto"
    >
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="分类名称"></el-input>
      </el-form-item>
      <el-form-item label="上级分类">
        <el-select v-model="dataForm.pid" placeholder="上级分类">
          <el-option key="0" label="请选择" :value="0"></el-option>
          <el-option v-for="cate in categories" :key="cate.id" :label="cate.name" :value="cate.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="分类图片" prop="img">
        <el-button type="primary" v-show="!dataForm.img"  @click="showUploadModal(true)">
          上传
          <i class="el-icon-upload el-icon--right"></i>
        </el-button>
        <div class="uploader-list am-cf">
          <div
            class="file-item"
            v-show="dataForm.img"
          >
            <img :src="dataForm.img">
            <i class="icon el-icon-circle-close file-item-delete" @click="delImg"></i>
          </div>
        </div>
        <!-- <el-input v-model="dataForm.img" placeholder="商品图片"></el-input> -->
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="dataForm.sort" placeholder="排序"></el-input>
      </el-form-item>
      <el-form-item label="是否首页" prop="specType">
        <el-radio-group v-model="dataForm.isShowIndex">
          <el-radio :label=0>否</el-radio>
          <el-radio :label=1>是</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('Common.Cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmit()">{{ $t('Common.Confirm') }}</el-button>
    </span>
  </el-dialog>
    <UploadModal
      :type="uploadCallbackType"
      :visible="uploadVisible"
      :extParams="uploadExtParams"
      :multiple="false"
      ref="uploadModal"
      @changeVisible="showUploadModal"
      @chooseImg="chooseImg"
    />
  </div>
</template>


<script>
import UploadModal from "@/components/uploadModal";
export default {
  components: {
    UploadModal
  },
  data() {
    return {
      visible: false,
      categories: [],
      uploadCallbackType: 1,
      uploadVisible:false,
      uploadExtParams:0,
      dataForm: {
        id: 0,
        name: "",
        pid: "",
        img: "",
        sort: "",
        isShowIndex: 0
      },
      dataRule: {
        name: [{ required: true, message: "分类名称不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    init(id) {
      this.loadCategory();
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(
              `/admin/category/info/${this.dataForm.id}`
            ),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.name = data.category.name;
              this.dataForm.pid = data.category.pid;
              this.dataForm.img = data.category.img;
              this.dataForm.sort = data.category.sort;
            }
          });
        }
      });
    },
    chooseImg(data, type, uploadExtParams) {
      if (data.length > 0) {
        this.dataForm.img = data[0].fileUrl
      }
    },
    delImg () {
      this.dataForm.img = null;
    },
    showUploadModal(visible) {
      if (visible) {
        this.$nextTick(() => {
          this.$refs.uploadModal.init();
        });
      }
      this.uploadVisible = !!visible;
      this.uploadCallbackType = 1;
      this.uploadMultiple = true;
    },
    //加载一级分类
    loadCategory() {
      this.$http({
        url: this.$http.adornUrl(`/admin/category/list`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.categories = data.data.filter(item => item.pid == 0)
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/admin/category/${!this.dataForm.id ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              name: this.dataForm.name,
              pid: this.dataForm.pid,
              img: this.dataForm.img,
              isShowIndex: this.dataForm.isShowIndex,
              sort: this.dataForm.sort
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="less">
  .uploader-list {
    .file-item {
      float: left;
      min-width: 110px;
      position: relative;
      margin: 20px 25px 0 0;
      padding: 4px;
      border: 1px solid #ddd;
      background: #fff;
      img {
        width: 110px;
        height: 100px;
      }
      .file-item-delete {
        position: absolute;
        top: -10px;
        right: -10px;
        cursor: pointer;
        height: 22px;
        width: 22px;
        line-height: 22px;
        background: rgba(153, 153, 153, 0.7);
        border-radius: 50%;
        text-align: center;
        color: #fff !important;
      }
    }
  }
</style>
